<template>
	<div class="profit-chart-box">
		<div id="centerChart"></div>
	</div>
</template>
<script setup>
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";

const calc = (v) => {
	let dataArr = [
		{
			name: "总数",
			value1: changeNumToWan(v.receivable_sum || 0),
			value2: changeNumToWan(-1 * (v.write_off_sum || 0)),
		},
		{
			name: "医疗费",
			value1: changeNumToWan(v.receivable_medical_expenses || 0),
			value2: changeNumToWan(-1 * (v.write_off_medical_expenses || 0)),
		},
		{
			name: "定金",
			value1: changeNumToWan(v.receivable_deposit || 0),
			value2: changeNumToWan(-1 * (v.write_off_deposit || 0)),
		},
		{
			name: "床位费",
			value1: changeNumToWan(v.receivable_bed_fee || 0),
			value2: changeNumToWan(-1 * (v.write_off_bed_fee || 0)),
		},
		{
			name: "护理费",
			value1: changeNumToWan(v.receivable_nursing_expenses || 0),
			value2: changeNumToWan(-1 * (v.write_off_nursing_expenses || 0)),
		},
		{
			name: "保证金",
			value1: changeNumToWan(v.receivable_margin || 0),
			value2: changeNumToWan(-1 * (v.write_off_margin || 0)),
		},
		{
			name: "管理费",
			value1: changeNumToWan(v.receivable_management_fee || 0),
			value2: changeNumToWan(-1 * (v.write_off_management_fee || 0)),
		},
		{
			name: "床品费",
			value1: changeNumToWan(v.receivable_bedding_fee || 0),
			value2: changeNumToWan(-1 * (v.write_off_bedding_fee || 0)),
		},
	];
	let xArr = dataArr.map(({ name }) => name);
	let yArr1 = dataArr.map(({ value1 }) => value1);
	let yArr2 = dataArr.map(({ value2 }) => value2);
	let legendArr = [
		{
			name: "支出",
			itemStyle: {
				color: "#28B4B4",
			},
		},
		{
			name: "收入",
			itemStyle: {
				color: "#1978E5",
			},
		},
	];

	let options = {
		grid: {
			right: "5%",
			top: "15%",
			bottom: "15%",
		},
		legend: {
			icon: "circle",
			data: legendArr,
			itemWidth: 8,
			itemHeight: 8,
			itemGap: 30,
			textStyle: {
				color: "rgba(216, 240, 255, 0.8)",
			},
		},
		xAxis: {
			type: "category",
			data: xArr,
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				color: "rgba(176,215,255,0.2)",
			},
			axisLabel: {
				color: "rgba(216,240,255,0.8)",
				interval: 0,
				margin: 15,
			},
		},
		yAxis: [
			{
				name: "单位（万元）",
				nameTextStyle: {
					color: "#D3E3FF",
				},
				type: "value",
				axisLabel: {
					color: "rgba(216,240,255,0.8)",
				},
				splitLine: {
					lineStyle: {
						color: "rgba(176,215,255,0.25)",
						type: "dashed",
					},
				},
			},
		],
		series: [
			{
				type: "bar",
				name: "收入",
				data: yArr1,
				showSymbol: false,
				stack: "sameLine",
				barWidth: 20,
				label: {
					show: true,
					position: "top",
					color: "#1978E5",
				},
				itemStyle: {
					color: {
						x: 0,
						y: 1,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: "rgba(25,120,229,0.6)",
							},
							{
								offset: 1,
								color: "rgba(25,120,229,0.1)",
							},
						],
					},
				},
				showBackground: true,
				backgroundStyle: {
					color: "rgba(255,255,255,0.08)",
				},
			},
			{
				type: "bar",
				name: "支出",
				data: yArr2,
				showSymbol: false,
				stack: "sameLine",
				barWidth: 20,
				label: {
					show: true,
					position: "bottom",
					color: "#28B4B4",
				},
				itemStyle: {
					color: {
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: "rgba(24,255,239,0.6)",
							},
							{
								offset: 1,
								color: "rgba(20,197,231,0.1)",
							},
						],
					},
				},
			},
		],
	};
	return options;
};
let profitChartRef = null;
let initProfitChartData = (v) => {
	profitChartRef.setOption(calc(v));
};
const initChart = (v) => {
	if (!profitChartRef)
		profitChartRef = echarts.init(document.getElementById("centerChart"));
	initProfitChartData(v);
};
defineExpose({
	initChart,
});
</script>
<style lang="scss" scoped>
.profit-chart-box {
	width: 100%;
	height: 100%;
	#centerChart {
		width: 100%;
		height: 100%;
	}
}
</style>
